<!DOCTYPE html>
<title>Test that TextTrack's cues are rendered correctly when the snap to lines flag is not set.</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<video>
    <track src="captions-webvtt/captions-snap-to-lines-not-set.vtt" kind="captions" default>
</video>
<script>
async_test(function(t) {
    var video = document.querySelector("video");
    var testTrack = document.querySelector("track");
    video.src = "../content/test.ogv";

    // In Chromium it is the enclosure element, which provides the controls height, otherwise the panel;
    // both are the second child in the shadow DOM.
    var controlsPanelElement = internals.shadowRoot(video).firstChild.firstChild;

    var cueDisplayContainer;
    video.oncanplaythrough = t.step_func(function() {
        cueDisplayContainer = textTrackContainerElement(video);
        runNextTestCase();
    });

    var seekTimeIndex = 0;
    var testCaseSeekTime = [
            0.10,
            0.60,
            1.10,
            1.60,
            2.10,
            2.60,
            3.10,
            4.10
    ];
    var cueRenderingPosition = [
            // Number of active cues 1.
            [[0, 100, "center"]],
            [[0, 50, "center"]],
            [[0, 0, "start"]],
            [[0, 0, "end"]],
            [[0, 100, "right"]],
            [[0, 100, "left"]],
            [[0, 50, "center"]],
            [ //Number of active cues 7.
                [0, 50, "center"],
                [0, 0, "start"],
                [0, 0, "end"],
                [0, 100, "center"],
                [0, 25, "end"],
                [44, 33, "start"],
                [23, 55, "start"]
            ]
    ];
    function runNextTestCase() {
        if (seekTimeIndex == testCaseSeekTime.length) {
            t.done();
            return;
        }

        video.currentTime = testCaseSeekTime[seekTimeIndex];
        video.onseeked = t.step_func(seeked);
    }

    function seeked() {
        var cuePosition = cueRenderingPosition[seekTimeIndex];
        for (var i = 0; i < testTrack.track.activeCues.length; ++i) {
            cueDisplayElement = textTrackCueElementByIndex(video, i);

            assert_equals(cueDisplayElement.innerText, testTrack.track.activeCues[i].text);
            assert_equals(testTrack.track.activeCues[i].align, cuePosition[i][2]);

            assert_equals(Math.round(cueDisplayElement.offsetLeft / cueDisplayContainer.offsetWidth * 100), cuePosition[i][0]);
            assert_equals(Math.round(cueDisplayElement.offsetTop / cueDisplayContainer.offsetHeight * 100), cuePosition[i][1]);
        }

        seekTimeIndex++;
        runNextTestCase();
    }
});
</script>
